<template>
  <el-button type="info">{{ nickname }}</el-button>
  <el-button type="default">{{ name }}</el-button>
  <el-button type="default" @click="toUrl('/login')">跳转到登录</el-button>
  <el-button type="default" @click="toUrl('/reg')">跳转到注册</el-button>
  <router-view></router-view>
</template>
<script setup>

import { useRouter } from 'vue-router';
const router = useRouter()

// 引入数据仓库
import {userStore} from "./store/userStore";
// 把数据仓库数据变成响应式数据的 pinia 自带的api的接口
import {storeToRefs} from 'pinia'




const userInfo = userStore()
const {nickname, name, age, sex} = storeToRefs(userInfo)

// 如何去修改数据
const changeData = () => {
  userInfo.nickname = '胖纸3'
  userInfo.age = 100
}
const resetData = () => {
  userInfo.$reset()
}

const patch = () => {
  userInfo.$patch({
    nickname: '昵称',
    name: '史蒂夫',
    age: '1111',
  })
}

const toUrl = (url)=>{
  return router.push({
    path:url
  })

}

</script>
<style scoped>
.margins{
  margin-left: 10px;
}

</style>
